<template >
	<div class="contain-report">
		<div class="report-title">答题情况</div>
		<div class="report-search"  >
			<el-input style="width: 300px"
					  v-if="tableData.length !== 0"
					  placeholder="请输入"
					  v-model="form.name"
					  clearable
					  @clear="getList"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getList"></i>
			</el-input>
		</div>
		<div class="report-table" v-if="tableData.length !== 0">
			<div class="table-header">
				<div class="table-box">答题人</div>
				<div class="table-box">提交时间</div>
				<div class="table-box">单选题正确率</div>
				<div class="table-box">多选题正确率</div>
				<div class="table-box">判断题正确率</div>
				<div class="table-box">操作</div>
			</div>
			<div class="tab-body">
				<div class="table-list" v-for="item in tableData" :key="item.id">
					<div class="list-show">{{item.userName}}</div>
					<div class="list-show">{{item.createTime}}</div>
					<div class="list-show">{{item.singleChoice || '暂无'}}</div>
					<div class="list-show">{{item.multipleChoice || '暂无'}}</div>
					<div class="list-show">{{item.judge || '暂无'}}</div>
					<div class="list-show">
						<el-button type="text" v-if="item.status === 1" @click="getInSolution(item.id)">点评主观题</el-button>
						<el-button type="text" v-if="item.status === 2" @click="getInDetails(item.id)">查看详情</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="report-nolist" v-if="tableData.length === 0">
			<el-empty description="暂无学生答题"></el-empty>
		</div>
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>
</template >

<script >
	import { studentData } from "../../api/questions";

    export default {
        name: "answerStuation",
		data(){
            return{
                form:{
                    id: this.$route.query.id,
                    name: "",
                    pageIndex: 1,
                    pageSize: 5
                },
                tableData:[],
                total:null,
			}
		},
		mounted() {
            this.getList()
        },
        methods:{
            async getList(){
            	const { data } = await studentData(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total =  data.data.total
                }
			},
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            },
            getInSolution(id){
                this.$router.push({
                    name:'solution',
                    query:{
                        id
                    }
                })
			},
            getInDetails(id){
                this.$router.push({
                    name:'commentDetails',
                    query:{
                        id
                    }
                })
			}
		}
    }
</script >

<style scoped lang="less" >
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		
		.report-search{
			width: 90%;
			margin: 30px auto;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-add{
			width: 90%;
			margin: 20px auto 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.add-box{
				width: 100%;
				border-radius: 5px;
				border: 1px dashed #6ba9ff;
				padding: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				i{
					font-size: 20px;
					color: #6ba9ff;
					margin-right: 5px;
				}
				span{
					font-size: 16px;
					color: #6ba9ff;
				}
				&:hover{
					cursor: pointer;
				}
			}
		}
		.report-table{
			width: 90%;
			margin: 20px auto 0;
			box-sizing: border-box;
			.table-header{
				width: 100%;
				height: 40px;
				background-color: #7fd1e5;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.table-box{
					width: 20%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
			}
			.tab-body{
				width: 100%;
				background-color: #ffffff;
				padding: 20px 0;
				box-sizing: border-box;
				border-radius: 20px;
				.table-list{
					margin: 10px 0;
					width: 100%;
					padding-bottom: 10px;
					box-sizing: border-box;
					border-bottom: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.list-show{
						width: 20%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
